<template>
  <view class="conter">
    <!-- 已购买课程显示 -->
    <view class="purchase" v-if="isDidntbuy">
      <!-- 选项卡 -->
      <view class="hrader" :style="{paddingTop: statuHeight + 'px'}">
       <ms-tabs class="tabs-mzy" :list="tabList" v-model="tebActive" itemColor='#262626' lineColor='#FF800C'
       	@input="handleChange" />
      </view>
      <!-- 主题内容 -->
      <view class="main">
        <view class="curriculum">
          <view class="time">{{ dateWeek }}</view>
          <view class="item-curriList" v-for="item in dataCulum" :key="item.courseCsv.guid">
            <view class="conter-img">
              <image class="img" mode="aspectFill" :src="item.courseCsv.courseTextureId"></image>
              <view class="programming">{{ item.courseCsv.seriesName }}</view>
            </view>
            <view class="right-name-text">
              <view class="right-title">{{ item.courseCsv.title }}</view>
              <view class="right-subTitle">{{ item.courseCsv.name }}</view>
              <htz-rate v-model="item.star"  :type="0" :count="3" :readonly='true'></htz-rate>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 未购买课程 -->
    <view class="Didntbuy" v-else>
      <view class="dint-img">
        <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/course/nodata.png"></image>
      </view>
      <!-- <view class="didnt-name">暂无课程</view> -->
      <view class="dredge" @click="goOpen">去开通</view>
      <view class="wodredge">我已开通课程</view>
      <view class="go-rigster" @click="$refs.didntbuy.getPopupOpen()">去绑定</view>
    </view>
    <binding ref="didntbuy"></binding>
  </view>
</template>

<script>
  import htzRate from '@/components/htz-rate/htz-rate.vue' // 评分组件
  import binding from '@/components/loding/binding.vue' // 绑定弹窗组件
  import { $POST, $GET } from '@/utils/api.js' // 接口api
  import { getDateWeek } from '@/utils/date.js'
  export default {
    components: { htzRate, binding },
  	data() {
  		return {
        dateWeek: '', // 周几
        isDidntbuy: false,
        dataCulum: [], // 列表数据
        tebActive: 0, // 顶部选项卡下表
        tabList: [{id: 1, title: "全部"}, {id: 2, title: '思维建模'}],
  			statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
  		}
  	},
    onLoad() {
      // 判断是否授权了
       // if (!this.$token) {
       //     let path = '/pages/plan/index'
       //     uni.setStorageSync('BackPath', path)
       //     uni.navigateTo({
       //       url: "/pages/login/index"
       //     })
       // }
      this.getCourseList() // 获取课程表方法
      this.$wechat.initJssdk() // 注入权限
      this.queryPhone() // 查询是否绑定了手机号码
    },
    methods:{
      // 获取列表接口
      async getCourseList() {
        const vm = this
        const userData = uni.getStorageSync('userIfon')
        if(userData.phoneNumber) {
          // 查询是否买过课
           const courseState = await $GET('/mall/client-app/owned-sku?PhoneNumber='+userData.phoneNumber)
           if(courseState.ownedSystemCourse) { // 说明买过系统课
             const res = await $GET('/courseware/SeriesCourse/d385f99c-68b3-a3d4-bfa4-39fc33fcc0d3')
             if(res.code === 0) {
               vm.isDidntbuy = true
               vm.dataCulum = res.result.items[1].courses
               vm.dateWeek = getDateWeek(res.result.items[1].buyTime)
             }
           }
        }else{
          vm.isDidntbuy = false
        }
      },
      // 查询是否绑定了手机号码
       async queryPhone() {
        const res = await $GET("https://wxmp.dev.jinlinjishu.com/api/courseware/account/bind-state")
        // if (res.code == 0) {
          uni.getStorageSync('Bindingphone', res)
        // }
      },
      // 去开通
      goOpen() {
        uni.navigateTo({
          url: '/pages/home/trialclass'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conter{
    .hrader{
      display: flex;
      align-items: center;
      height: 88rpx ;
      // padding-left: 20rpx;
      /deep/.tabBlock .tab__item-title {
      	margin: 0 50rpx;
      }
      /deep/ .tabBlock .tab__item{
        font-size: 28rpx;
        color: #8C8C8C;
      }
      /deep/ .tabBlock .tab__item--active{
        font-size: 36rpx;
        color: #262626 !important;
      }
      /deep/ .tab__line{
        width: 35rpx !important;
        height: 8rpx;
        border-radius: 4rpx;
      }
    }
    .main{
      // padding: 32rpx 0;
      .curriculum{
        .time{
          width: 148rpx;
          height: 40rpx;
          background: #F0F0F0;
          border-radius: 28rpx;
          color: #8C8C8C;
          font-size: 24rpx;
          text-align: center;
          margin: 32rpx 0 16rpx 40rpx;
        }
        .item-curriList{
          width: 670rpx;
          height: 240rpx;
          background: #FFFFFF;
          box-shadow: 0px 8rpx 32rpx rgba(0, 0, 0, 0.06);
          border-radius: 20rpx;
          margin: auto;
          display: flex;
          align-items: center;
          margin-bottom: 32rpx;
          padding: 20rpx;
          .conter-img{
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx 0px 0px 20rpx;
            position: relative;
            .img{
               border-radius: 20rpx 0px 0px 20rpx;
            }
            .programming{
               width: 100rpx;
               height: 40rpx;
               text-align: center;
               line-height: 40rpx;
               position: absolute;
               left: 0px;
               top: 0px;
               background: linear-gradient(90deg, #FFCA40 0%, #FFA81A 100%);
               border-radius: 20rpx 0px;
               font-size: 20rpx;
               color: #FFFFFF;
            }
          }
          .right-name-text{
            margin-left: 32rpx;
            .right-title{
              color: #8C8C8C;
              font-size: 24rpx;
              padding-top: 30rpx;
            }
            .right-subTitle{
              color: #262626;
              font-size: 28rpx;
              font-weight: 500;
              margin: 8rpx 0 40rpx 0;
            }
          }
        }
      }
    }
    // 未购买样式
    .Didntbuy{
      height: 100vh;
      padding-top: 128rpx;
      .dint-img{
        width: 320rpx;
        height: 320rpx;
        margin: auto;
      }
      // .didnt-name{
      //   font-size: 38rpx;
      //   font-weight: bold;
      //   margin: 40rpx 0 20rpx 0;
      //   text-align: center;
      // }
      .dredge{
        width: 464rpx;
        height: 72rpx;
        background: #FF800C;
        border-radius: 36rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 72rpx;
        margin: auto;
        margin-top: 48rpx;
      }
      .wodredge{
        font-size: 24rpx;
        color:  #8C8C8C;
        text-align: center;
        margin: 18rpx 0 0rpx 0;
      }
      .go-rigster{
        font-size: 24rpx;
        color:  #FF800C                   ;
        text-align: center;
      }
    }
  }
</style>
